<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI数据库问答式工具</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/styles.css">
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航区 -->
    <header class="top-nav">
        <div class="logo">
            <i class="fas fa-database"></i>
            <h1>AI数据库问答式工具</h1>
        </div>
        <div class="nav-controls">
            <button id="importBtn" class="nav-btn">
                <i class="fas fa-file-import"></i> 导入数据
            </button>
            <div class="data-source-indicator">
                <span>数据源: </span>
                <span id="currentDataSource">已配置数据库</span>
            </div>
            <span id="statusIndicator" class="status-indicator">
                <i class="fas fa-circle"></i> 就绪
            </span>
        </div>
    </header>

    <!-- 中部聊天区 -->
    <main class="chat-container">
        <div id="chatHistory" class="chat-history">
            <!-- 欢迎信息 -->
            <div class="message system-message">
                <div class="message-content">
                    <p>欢迎使用AI数据库问答式工具。您可以询问数据库相关问题，也可以与我进行一般对话。如需使用自定义数据，请点击'导入数据'按钮。</p>
                </div>
            </div>
            <!-- 聊天消息将在此动态添加 -->
        </div>
        
        <div class="chat-input-container">
            <textarea id="userInput" class="chat-input" placeholder="请输入您的问题，例如：哪些客户是有风险的？"></textarea>
            <button id="sendBtn" class="send-btn">
                <i class="fas fa-paper-plane"></i>
            </button>
            <button id="settingsBtn" class="settings-btn">
                <i class="fas fa-cog"></i>
            </button>
        </div>
    </main>

    <!-- 将原来的底部功能区改造成弹窗 -->
    <div id="settingsModal" class="settings-modal">
        <div class="settings-content">
            <h3>系统设置</h3>
            <!-- 添加AI模型选择 -->
            <div class="settings-section">
                <h4>AI模型选择</h4>
                <div class="model-selector">
                    <select id="aiModelSelect" class="model-select">
                        <option value="tongyi">通义千问</option>
                        <option value="deepseek">DeepSeek</option>
                        <option value="local">本地模型</option>
                    </select>
                </div>
            </div>
            
            <h3>查询选项</h3>
            <!-- 原有的查询选项内容 -->
            <div class="option-items">
                <div class="option-item">
                    <div class="option-text">
                        <span class="option-label">允许多表联查</span>
                        <span class="option-description">允许AI在多个表之间执行JOIN操作</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="allowJoinsOption">
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="option-item">
                    <div class="option-text">
                        <span class="option-label">复杂聚合</span>
                        <span class="option-description">允许复杂的GROUP BY和聚合函数</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="complexAggregationsOption">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            <button id="applyOptionsBtn" class="apply-options-btn">应用设置</button>
        </div>
    </div>

    <!-- 模态框 - 导入数据 -->
    <div id="importModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>导入数据</h2>
            <div class="import-form">
                <!-- 表单内容 -->
                <div class="file-upload">
                    <label for="fileInput">选择CSV/Excel文件</label>
                    <input type="file" id="fileInput" accept=".csv, .xlsx, .xls">
                    <p id="selectedFileName">未选择文件</p>
                </div>
                <button id="submitImportBtn" class="modal-btn">导入</button>
            </div>
        </div>
    </div>

    <script src="/static/scripts.js"></script>
</body>
</html>
